<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="true" title="纪念相册"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<album-group-list ref="list" @onLoaded="loaded = true" :hallId="hallId" :role="role"></album-group-list>
			<view v-if="loaded && role == 1" class="common-margin-top"><common-button @click="createAblum()" title="创建纪念相册"></common-button></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import albumGroupList from './components/group-list.vue';

export default {
	components: {
		albumGroupList
	},
	data() {
		return {
			baseUrl: process.env.NODE_ENV === 'development' ? this.$config.baseUrl.dev : this.$config.baseUrl.pro,
			hallId: undefined,
			role: 0,
			loaded: false
		};
	},
	computed: {
		...mapState({
			systemInfo: state => state.app.systemInfo
		})
	},
	methods: {
		/* 创建纪念相册 */
		createAblum() {
			uni.navigateTo({
				url: './create-album-group?hallId=' + this.hallId
			});
		}
	},
	onLoad(data) {
		this.hallId = data.hallId;
		this.role = data.role;
	},
	onShow() {
		if (this.loaded) {
			this.$refs.list.loadAlbum();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './album-group.scss';
</style>
